<template>
	<view
		class="login-tips-block"
		:class="[hidePage ? 'hidePage' : '']"
		v-if="isShowLogin"
		@touchmove.stop="catchTouchMove"
	>
		<view class="login-tips " style="">
			<view class="icon-top-play"><image :src="configInfo.site_logo"></image></view>
			<view class="h4">您还未登录</view>
			<view class="h5">
				<text>为了完整体验,需要您的授权</text>
				<text>授权仅用于用户昵称与头像</text>
			</view>
	
			<!-- #ifdef MP-WEIXIN -->
			<view
				v-if="calcIsOpenSMFlag"
				:class="['login-btn', isAllAngle ? 'border-radius-style-all-arg' : 'border-radius-style-half-arg']"
				@click="loginFn"
				:style="{ background: configInfo.web_site_color }"
			>
				立即登录
			</view>
			<button
				v-else
				:class="['login-btn', isAllAngle ? 'border-radius-style-all-arg' : 'border-radius-style-half-arg']"
				@click="loginFn"
				:style="{ background: configInfo.web_site_color }"
			>
				立即登录
			</button>
	
			<!-- #endif -->

		
			<!-- #ifdef H5||APP-PLUS -->
			<button
				:class="['login-btn', isAllAngle ? 'border-radius-style-all-arg' : 'border-radius-style-half-arg']"
				:style="{ background: configInfo.web_site_color }"				
				@click="gzhH5WxloginFn"
			>
				立即登录
			</button>	
			<!-- #endif -->
			
			<navigator
				v-if="isShowExit"
				hover-class="none"
				target="miniProgram"
				open-type="exit"
				class="say-no"
				:style="{ color: configInfo.web_site_color }"
			>
				退出
			</navigator>
			<text v-else class="say-no" @click="closeFn" :style="{ color: configInfo.web_site_color }">暂不登录</text>
		</view>
	</view>
</template>

<script>

export default {
	props: {
		// 是否显示 登录框 组件
		isShowLogin: {
			type: Boolean,
			required: true,
			default: false
		},
		// 是否显示 退出小程序按钮 (显示退出 就不显示 取消了  用在转发页面必须登录)
		isShowExit: {
			type: Boolean,
			default: false
		},
		// 登录框显示时 是否隐藏页面是所有元素
		hidePage: {
			type: Boolean,
			default: false
		},
		/* 
			@description
				toBack默认false
				当 toBack 是 true时 表示 用户点击暂不登录 就返回上一页面
		*/
		toBack: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
		
		};
	},
	methods: {
		// 小程序 登录功能
		async loginFn() {
			let that = this;
			let userProfileObject = await that.getUserProfileFn();
			let avatarUrl, nickName, province, city, gender;

			if (userProfileObject.type == 'success') {
				avatarUrl = userProfileObject.result.avatarUrl;
				nickName = userProfileObject.result.nickName;
				province = userProfileObject.result.province;
				city = userProfileObject.result.city;
				gender = userProfileObject.result.gender;
			} else {
				uni.showToast({
					icon: 'none',
					title: '获取个人信息失败'
				});
				return false;
			}

			uni.login({
				async success(e) {
					console.log('先获取code那堆数据', e);

					uni.getUserInfo({
						//获取用户信息
						async success(userInfoRes) {
							let iv = encodeURIComponent(userInfoRes.iv);
							let encryptedData = encodeURIComponent(userInfoRes.encryptedData);
							console.log('uni.getUserInfo 成功的数据', userInfoRes, '\n');
							//第一次提示用户授权 成功后的回调 授权后再点直接成功 拿回来用户信息

							console.log('后获取用户信息 包括iv 和 xxxdata字符串', userInfoRes);

							let code = e.code;

							// 登录时 把分享者的字符串带上
							let sharerObj = {};
							let sharerStr = uni.getStorageSync('sharer'); // 带上分享上级的加密字符串
							if (sharerStr) {
								sharerObj.sharer = sharerStr;
							}

							let data = {
								avatar: avatarUrl,
								nickname: nickName,
								area: city,
								sex: gender,
								platform: '小程序',
								code,
								iv,
								encryptedData,

								...sharerObj
							};
							let result = await that.$request({
								loading: true,
								url: '/api/login/third',
								data
							});
							console.log('用户登录时带的参数', data, '\n', '返回的结果', result, '\n');

							if (result.statusCode == 200) {
								if (result.data.code == 200) {
									that.logOutFn(); // 先退出登录一下

									let token = result.data.data.login_token;
									that.$store.commit('setToken', token);
									uni.setStorageSync('token', token);
								
					if (nickName=='微信用户'){
							that.$emit('loginnew');
					}
									uni.hideLoading();
									uni.showLoading({});
									that.hasTokenGetUserInfo(() => {
										uni.hideLoading();
										uni.showToast({
											icon: 'success',
											title: '登录成功'
										});
										
										
										that.$emit('loginSuccessCallback');
										that.closeGlobalLoginFn(false);
									});
								} else {
									uni.showToast({
										icon: 'none',
										title: result.data.msg
									});
								}
							} else {
								uni.showToast({
									icon: 'none',
									title: that.$errorMsg
								});
							}
						},
						fail(e) {
							console.log('登录失败 小程序 getUserInfo 接口fail ', e);
						}
					});
				}
			});
		},

	
		loginFn_h5() {
			console.log('0');
			uni.showToast({
				icon: 'none',
				title: '未接入开放平台'
			});
		},
		closeFn() {
			this.$emit('close');
			this.$emit('guanbi');		
			if (this.toBack) {
				this.toBackFn();
			}
		},

		
		gzhH5WxloginFn() {
			let that = this;
			that.navigateToFn({
				url: `/pages/login/login`
			});			
		}
	
	}
	// ↑↑↑↑↑ methods 结束
};
</script>

<style lang="scss">
.login-tips-block {
	position: fixed;
	z-index: 1990;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);

	&.hidePage {
		background: #a9a9a9;
	}

	.login-tips {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 600rpx;
		height: 600rpx;
		background: #ffffff;
		border-radius:10px;
		.icon-top-play {
			image {
				position: absolute;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
				width: 200rpx;
				height: 200rpx;
			}
		}

		.h4 {
			margin-top: 175rpx;
			text-align: center;
			font-weight: 600;
			color: #000000;
			font-size: 36rpx;
		}

		.h5 {
			margin-top: 40rpx;
			color:#000000;
			font-size: 30rpx;
			text-align: center;

			text {
				display: block;
				line-height: 50rpx;
			}
		}

		.say-no,
		.login-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 35rpx auto 0;
			width: 536rpx;
			height: 88rpx;
			color: #ffffff;
			font-size: 30rpx;
		}

		.login-btn {
			border-radius: 14rpx;
		}

		.say-no {
			margin-top: 10rpx;
			background: transparent;
			text-decoration: underline;
		}
	}
}
</style>
